<template>
	<header id="header">
		<div class="head">
			<div class="logo">ZL</div>
			<router-link to="/">首页</router-link>
			<router-link to="/list">音乐</router-link>
			<a href="http://ituserzhu.gitee.io/choose/">抽奖</a>
			<!-- <router-link to="/mv_list&0&0&0">MV</router-link> -->
			<div class="search fl" @click="toggleSearch = !toggleSearch">
				<img src="./../assets/images/search.png" height="30">
			</div>
		</div>
		<form :class="{active: toggleSearch}" @submit.prevent="searchMusic">
			<input type="text" placeholder="搜索歌曲" v-model="searchText">
			<button><img src="./../assets/images/search.png" height="25"></button>
		</form>
	</header>
</template>

<script>
export default {
	name: 'Heading',
	data() {
		return {
			toggleSearch: false,
			searchText: '',
		}
	},
	methods: {
		searchMusic() {
			this.searchText != '' && this.$router.push('/search/' + this.searchText)
			this.toggleSearch = false;
		},
	},
}
</script>

<style lang="stylus" scoped>
header 
	height 60px 
	line-height 60px 
	font-size 0
	position relative
	.head
		position absolute
		width 100%
		height 100%
		background-color #333
		padding 0 20px 
		left 0px
		top 0px
		z-index 4
		box-sizing border-box
	a 
		color #fff
		padding 0 15px
		font-size 16px
		display inline-block 
		vertical-align middle 
	.logo 
		display inline-block 
		vertical-align middle 
		height 100%
		padding 0 10px
		font-size 24px 
		color #fff
		text-shadow 0 0 2px #fefcc9, 0px -2px 0px #feec85, 0px -3px 0px #ffae34, 0px -4px 0px #ec760c, 2px 0px 10px #cd4606, 0 0px 0px #973716, 1px 0px 0px #451b0e
	.search
		float right
		width 60px
		text-align center
		img 
			vertical-align middle
	form
		position absolute
		width 100%
		height 50px
		background-color rgba(0,0,0,.7)
		padding 10px 
		box-sizing border-box
		transition top .2s
		top 0px 
		left 0px
		z-index 3
		&.active 
			top 60px
		input, button 
			outline none
			border none 
			background-color transparent
		input 
			width 100%
			height 100%
			background-color rgba(255,255,255,0.8)
			vertical-align top
			padding 0 40px 0 10px
			box-sizing border-box
		button 
			position absolute
			width 40px 
			height 30px
			text-align center
			right 10px 
			top 10px
			img 
				vertical-align middle
</style>